<template>
    <div class="aside-list" :class="{'active':active}">
        <!-- 文字超出部分显示。。。 -->
        <span class="truncate"><slot/></span>
        <el-button class="ml-auto px-1" text="true" type="primary" size="small"  @click.stop="$emit('edit')">
            <el-icon :size="12">
                <Edit />
            </el-icon>
        </el-button>
        <span @click.stop="()=>{}">
                        <el-popconfirm title="是否要删除该分类?" 
                        confirmButtonText = '确认'
                        cancelButtonText = '取消'
                        @confirm.stop = "$emit('delete')">
                                <template #reference>
              

                            <!-- 内间距 px-1 -->
                            <el-button class="px-1" text="true" type="primary" size="small" >
                                <el-icon :size="12">
                                    <Close />
                                </el-icon>
                            </el-button>

                                </template>

                        </el-popconfirm>
        </span>

    </div>
</template>
<script setup>
defineProps({
    active:{
        type:Boolean,
        default:false
    }
})

defineEmits(['edit','delete'])
</script>
<style>
.aside-list{
    border-bottom: 1px solid #f4f4f4;
    cursor: pointer;
    /* 外边距为p-3 */
    @apply flex items-center p-3 text-sm text-gray-600;
}
.aside-list:hover,.active{
    @apply bg-pink-50;
}
</style>